<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
  <script type="text/babel">
  class ListItem extends React.Component{
    constructor(...args){
      super(...args);
    }

    fn(){
      this.props.fn(this.props.index);
    }

    render(){
      return <li>
        <input type="button" value="删除" onClick={this.fn.bind(this)} />
        <h4>{this.props.data.name} </h4>
        <p>{this.props.data.pass}</p>
      </li>;
    }
  }

  class List extends React.Component{
    constructor(...args){
      super(...args);

      let users=this.props.users;

      this.state={
        users
      };
    }

    delChild(n){
      let users=this.state.users;

      users.splice(n, 1);

      this.setState({
        users
      })
    }

    render(){
      return <div>
        <ul>
          {this.state.users.map((json,index)=><ListItem fn={this.delChild.bind(this)} index={index} key={index} data={json}></ListItem>)}
        </ul>
      </div>;
    }
  }

  let oDiv=document.getElementById('div1');

  ReactDOM.render(
    <List users={[
      {name: 'blue', pass: '123456'},
      {name: 'aaa', pass: '654321'},
      {name: 'bbb', pass: '111111'},
      {name: 'ccc', pass: '212423'},
      {name: 'ddd', pass: 'sdfsdgf'},
    ]}></List>, oDiv
  );
  </script>
</html>
